<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <style>
        #fom{
            margin-left: 155px;
            margin-top: 10px;
        }
        .classInfo,#select{
            font-size: 15px;
            margin-left: 20px;
            color: #957592;
            font-family: 楷体;
        }
        .classInfo input,#select{
            margin-top: 25px;
            border-radius: 5px;
            width: 159px;
            height: 25px;
        }
        #btn1{
            font-size: 15px;
            margin-left: 20px;
            color: #FF5722;
            font-family: 楷体;
            width: 120px;
            border: none;
            background-color: #03A9F4;
        }
    </style>
</head>
<body>
<div id="right">
    <form action="" id="fom">
        <div class="classInfo">
            <label for="UserName">姓名：</label>
            <input type="text" name="UserName" id="name"/>
        </div>
        <div class="classInfo">
            <label for="UserPwd">密码：</label>
            <input type="password" name="UserPwd"/>
        </div>
        <div class="classInfo">
            <label for="UserAge">年龄：</label>
            <input type="number" name="UserAge">
        </div>
        <div class="classInfo">
            <label for="UserSex">性别：</label>
            男<input type="radio" name="UserSex" value="男"/>
            女<input type="radio" name="UserSex" value="女"/>
        </div>
        <div class="classInfo">
            <label for="UserAdress">地址：</label>
            <select name="UserAdress" id="select">
                <option value="选择地区">请选择</option>
                <option value="湖南省">湖南省</option>
                <option value="湖北省">湖北省</option>
                <option value="广东省">广东省</option>
                <option value="山西省">山西省</option>
                <option value="江西省">江西省</option>
                <option value="东北省">东北省</option>
                <option value="其他">其他</option>
            </select>
        </div>
        <div class="classInfo">
            <input type="button" value="确  定" id="btn1" onclick="QDclick()">
        </div>
    </form>
    <script>
        //根据名字获取form中的信息
        var mingzi=localStorage.getItem(sessionStorage.getItem("名字"));
        var info=JSON.parse(mingzi);
        //alert(info.age); 19
        //显示他的信息在修改的页面上
        function showinfo() {
            document.forms[0].UserName.value=info.name;
            document.forms[0].UserPwd.value=info.pwd;
            document.forms[0].UserAge.value=info.age;
            document.forms[0].UserSex.value=info.sex;
            document.forms[0].UserAdress.value=info.adress;
        }
        showinfo();
        //跳转登录
        function jmpLogin() {
            window.location.href="Login.html";
        }
        //将修改后的值添加到applition中
        function QDclick() {
            var names=document.forms[0].UserName.value;
            var ages=document.forms[0].UserAge.value;
            var sexs=document.forms[0].UserSex.value;
            var pwds=document.forms[0].UserPwd.value;
            var adresss=document.forms[0].UserAdress.value;
            if(names==""||ages==""||sexs==""||pwds==""||adresss==""){
                alert("输入值不能为空！")
            }else{
                var pepleInfo={
                    name:info.name,
                    age:ages,
                    sex:sexs,
                    pwd:pwds,
                    adress:adresss
                };
                pepleInfo = JSON.stringify(pepleInfo);
                localStorage.setItem(names,pepleInfo);
                alert("修改成功！ 5秒后跳入登录页面!");
                setTimeout(jmpLogin,3000);
            }

        }
    </script>
</div>
</body>
</html>